<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<form name=frm>
    <ul>
        <input type="text" name="txt" placeholder="请输入查找" onkeyup="SelectTip(0)" onclick="SelectTip(1)"/>
      <span id="demo">
        <select name="demo" onchange="txt.value=options[selectedIndex].text;">
            <option>1111</option>
            <option>22</option>
            <option>33</option>
        </select>
      </span>
    </ul>
</form>
<script type="text/javascript">
    //1 初始化时候,先将数据存入数组
    var TempArr = [];// 存贮option
    var SelectObj = document.frm.elements["demo"];
    /* 先将数据存入数组 */
    with (SelectObj){
        for (i = 0; i < length; i++){
            TempArr[i] = [ options[i].text, options[i].value ]
        }
    }
    //2
    function SelectTip(flag) {
        var TxtObj = document.frm.elements["txt"]
        var SelectObj = document.getElementById("demo")
        var Arr = []
        with (SelectObj) {
            var SelectHTML = innerHTML.match(/<[^>]*>/)[0]
            for (i = 0; i < TempArr.length; i++)
                if (TempArr[i][0].indexOf(TxtObj.value) == 0 || flag)// 若找到以txt的内容开头的，添option。若flag为true,对下拉框初始化
                    Arr[Arr.length] = "<option value='" + TempArr[i][1] + "'>"
                    + TempArr[i][0] + "</option>"
            innerHTML = SelectHTML + Arr.join() + "</SELECT>"
        }
    }
    //3
</script>

</body>
</html>